<template>
  <div class="grid-wrapper">
    <div class="grid-box">
      <div class="grid-header">
        <img src="@/assets/common/icon-grid-1.png" class="icon" alt="" />
        <div class="grid-title">系统状态</div>
      </div>
      <div class="grid-body">
        <div class="status-box">
          <div
            class="status-item"
            v-for="(item, index) in statusList"
            :key="index"
          >
            <div class="status-item-title">{{ item.name }}</div>
            <div class="status-item-value" :class="{ status: item.type == 1 }">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-box">
      <div class="grid-header">
        <img src="@/assets/common/icon-grid-2.png" class="icon" alt="" />
        <div class="grid-title">实验参数与结果</div>
      </div>
      <div class="grid-body">
        <div class="silder-box">
          <div class="silder-title">参数控制</div>
          <div class="sidler-content">
            <div
              class="silder-item"
              v-for="(item, index) in controlList"
              :key="index"
            >
              <div class="silder-hd">
                <div class="silder-hd-title">{{ item.name }}</div>
                <div class="silder-hd-value">{{ item.value }}</div>
              </div>
              <div class="silder-bd">
                <a-slider
                  v-model:value="item.value"
                  :max="item.max"
                  :min="item.min"
                  :step="item.step"
                  @afterChange="handleSilderChange($event, item.type)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="silder-box">
          <div class="silder-title">实验结果</div>
          <div class="sidler-grid">
            <div
              class="grid-item"
              v-for="(item, index) in paramers"
              :key="index"
            >
              <div class="item-value">{{ item.value }}</div>
              <div class="item-title">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-box">
      <div class="grid-header">
        <img src="@/assets/common/icon-grid-3.png" class="icon" alt="" />
        <div class="grid-title">快速操作</div>
      </div>
      <div class="grid-body">
        <div class="button-group">
          <div class="button-item" @click="hooks.useHandleStartMeasurement">开始测量</div>
          <div class="button-item" @click="hooks.useHandleResetParameters">重置参数</div>
          <div class="button-item" @click="hooks.useHandleSaveConfiguration">保存配置</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import * as hooks from "@/hooks/useTest2Hooks";
const handleSilderChange = (e: any, type: any) => {
  switch (type) {
    case 0:
      hooks.useHandleWavelength(e);
      break;
    case 1:
      hooks.useHandleSlitwidth(e); 
      break;
    case 2:
      hooks.useHandleGratingangle(e);
      break;
  }
  console.log("change", e, type);
};

const statusList = ref([
  {
    name: "电源状态",
    value: "运行中",
    type: 1,
  },
  {
    name: "光源",
    value: "就绪",
    type: 1,
  },
  {
    name: "探测器",
    value: "活跃",
    type: 1,
  },
  {
    name: "系统温度",
    value: "23.5°",
    type: 2,
  },
]);
const controlList = ref([
  {
    name: "波长(nm)",
    value: 550,
    max: 1000,
    min: 0,
    step: 10,
    type: 0,
  },
  {
    name: "狭缝宽度(mm)",
    value: 0.5,
    max: 1,
    min: 0,
    step: 0.1,
    type: 1,
  },
  {
    name: "光栅角度(°)",
    value: 15,
    max: 180,
    min: 0,
    step: 1,
    type: 2,
  },
]);
const paramers = ref([
  {
    name: "输入波长(nm)",
    value: 550,
  },
  {
    name: "输入波长(nm)",
    value: 550,
  },
  {
    name: "输入波长(nm)",
    value: 550,
  },
  {
    name: "输入波长(nm)",
    value: 550,
  },
]);
</script>
<style scoped lang="less">
.grid-wrapper {
  padding: 16px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  .grid-box {
    width: 368px;
    height: 553px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6ebf1;
    .grid-header {
      display: flex;
      align-items: center;
      background: #f2f3f5;
      padding: 0 12px;
      height: 42px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      .grid-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #262626;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
    }
    .grid-body {
      overflow-y: auto;
      padding: 16px;
    }
  }
}
.status-box {
  .status-item {
    height: 52px;
    background: #f2f3f5;
    border-radius: 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .status-item-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #262626;
      line-height: 20px;
    }
    .status-item-value {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #2776ff;
      line-height: 20px;
      &.status {
        width: 54px;
        height: 24px;
        background: #2776ff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
}
.silder-box {
  .silder-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #262626;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
  .sidler-content {
    border-bottom: 1px solid  #E8E9ED;
    margin-bottom: 16px;
    padding-bottom: 16px;
    .silder-item {
      padding-top: 12px;
      .silder-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .silder-hd-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          line-height: 20px;
        }
        .silder-hd-value {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          line-height: 20px;
        }
      }
      .silder-bd {
        :deep(.ant-slider-track) {
          background-color: #2776ff;
        }
        :deep(.ant-slider-handle::after) {
          box-shadow: 0 0 0 2px #2776ff;
        }
      }
    }
  }
  .sidler-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 12px;
    .grid-item {
      width: 160px;
      height: 90px;
      background: #f2f3f5;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .item-value {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #262626;
        line-height: 26px;
        text-align: center;
        font-style: normal;
        margin-bottom: 4px;
      }
      .item-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #595959;
        line-height: 16px;
        text-align: center;
        font-style: normal;
      }
      &:nth-child(2n + 1) {
        &::after {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          content: "";
          width: 1px;
          height: 16px;
          background: #e6ebf1;
        }
      }
    }
  }
}
.button-group {
  .button-item {
    height: 52px;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e6ebf1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #262626;
    line-height: 20px;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
